<template>
  <m-page>
    <!-- 发送至邮箱 -->
    <m-header title="发送至邮箱"></m-header>
    <div class="settled_send_mailbox">
      <p>发送至邮箱</p>
      <div class="g-list">
        <div class="g-left">
          <input type="text" placeholder="请输入邮箱地址" />
        </div>
        <div class="g-right">
          <ynet-field-item
            solid
            :content="data.payment_account"
            arrow
            placeholder="请选择邮箱类型"
            @click="cardSelect()"
          />
          <md-selector
            v-model="isCardSelectorShow"
            :data="card_options"
            title="选择邮箱类型"
            large-radius
            @choose="onCardChoose"
            is-check
          >
            <template slot-scope="{ option, index, selected }">
              <div class="selector-item-body" :class="{selected}">
                <div class="selector-item-left">
                  <span class="holder"></span>
                </div>
                <div class="selector-item-content">
                  <p class="selector-item-title" v-text="option.text"></p>
                </div>
              </div>
            </template>
          </md-selector>
        </div>
      </div>
      <p class="u-txt">发送失败</p>
      <div class="u-btn">
        <ynet-button type="warning" @click="showPopUp('center')">发送</ynet-button>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Selector } from "mand-mobile";
import { FieldItem, Button } from "ynet-mobile";
export default {
  components: {
    [Selector.name]: Selector,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button
  },
  data() {
    return {
      isPopupShow: {},
      isCardSelectorShow: false,
      checked: false, //协议单选框
      data: {
        payment_account: ""
      },
      card_options: [
        {
          value: "A",
          text: "163.com"
        },
        {
          value: "B",
          text: "qq.com"
        },
        {
          value: "C",
          text: "123.com"
        },
        {
          value: "D",
          text: "sina.com"
        }
      ]
    };
  },
  methods: {
    onChange(checked) {
      console.log(checked);
    },
    cardSelect() {
      this.isCardSelectorShow = true;
    },
    //银行卡列表选择事件
    onCardChoose({ text }) {
      this.data.payment_account = text;
    },
    showPopUp(type) {
      this.$set(this.isPopupShow, type, true);
    },
    hidePopUp(type) {
      this.$set(this.isPopupShow, type, false);
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

